<template>
  <div class="department">
    <div>部门</div>
    <screen v-bind="Config" v-model:searchData="searchData">
      <template #footer>
        <div class="handle-btns">
          <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
          <el-button :icon="RefreshRight" @click="reset">重置</el-button>
        </div>
      </template>
    </screen>
    <x-table
      :tableList="departmentList"
      v-bind="tableConfig"
      v-loading="loading"
      :currentPage="searchData.page"
      :pageSize="searchData.psize"
      :count="count"
      @pageChange="handlePageChange"
      @pszieChange="handleSizeChange"
    >
      <template #create_time="{ row }">
        <div v-format-time>{{ row.create_time }}</div>
      </template>
    </x-table>
  </div>
</template>

<script setup lang="ts">
import { RefreshRight, Search } from "@element-plus/icons"
import { ref } from "vue"

import { usePageHandle } from "@/hooks/useSearchHandle"

import screen from "@/components/screen"
import xTable from "@/components/table"
import pagination from "@/components/pagination"

import { Config } from "./config/search.config"
import { tableConfig } from "./config/table.config"

import { getAllDepartment } from "@/api"
import type { Idepartment } from "@/api"

const searchData = ref({
  psize: 10,
  page: 1,
  name: "",
  leader: "",
  create_time: ""
})
let departmentList: Idepartment[] = ref([])
let count = ref(0)
const loading = ref(false)
const fecthList = async () => {
  loading.value = true
  const list = await getAllDepartment(searchData.value)
  departmentList.value = list.data.data
  count.value = list.data.count
  loading.value = false
}
fecthList()
const [search, reset, initData] = usePageHandle(fecthList, searchData)
const handlePageChange = (val: number) => {
  searchData.value["page"] = val
  fecthList()
}
const handleSizeChange = (val: number) => {
  searchData.value["psize"] = val
  fecthList()
}
</script>

<style scoped lang="scss">
.department {
  .handle-btns {
    float: right;
    padding: 0 20px 10px 0;
  }
}
</style>
